<!-- 用户基本信息录入组件  -->
<template>
  <div class="box-body">
    <div class="box box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">员工基本信息</h3>
      </div>
      <div class="box-body">
        <section class="content">
          <div ref="profileImage" class="row row-height">
            <div class="col-xs-3 col-height">
              <div class="inside">
                <div class="content">
                  <el-upload class="avatar-uploader" action="/hr/person/uploadHeader" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </div>
            </div>
            <div ref="profileContent" class="col-xs-9 col-height col-top">
              <el-form :model="editprofile" :rules="rules" ref="editprofile" label-width="150px">
                <div class="col-md-6">
                  <el-form-item label="用工性质" :required='true'>
                    <el-select :disabled="!isEditable" v-model="editprofile.workType">
                      <el-option v-for="item in this.$store.state.sysconfigs.workerType" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="col-md-6">
                  <el-form-item label="在职状态" :required="true">
                    <el-select :disabled="!isEditable" v-model="editprofile.empState">
                      <el-option v-for="item in this.$store.state.sysconfigs.state" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="col-md-6">
                  <el-form-item label="姓名" prop="name">
                    <el-input :disabled="!isEditable" type="text" id="inputUserName" v-model="editprofile.name" placeholder="姓名"></el-input>
                  </el-form-item>
                </div>
                <div class="col-md-6">
                  <el-form-item label="性别" :required="true">
                    <el-select :disabled="!isEditable" v-model="editprofile.sex">
                      <el-option v-for="item in this.$store.state.sysconfigs.sex" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="col-md-6">
                  <el-form-item label="民族" :required="true">
                    <el-select :disabled="!isEditable" v-model="editprofile.national">
                      <el-option v-for="item in this.$store.state.nationals" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="col-md-6">
                  <el-form-item label="籍贯" :required="true">
                    <Birthplace :disabled="!isEditable" v-bind:birthplace="editprofile.birthplace"></Birthplace>
                  </el-form-item>
                </div>
                <div class="col-md-6">
                  <el-form-item label="证件" prop="cert">
                    <el-input :disabled="!isEditable" type="text" id="cert" v-model="editprofile.cert" placeholder="证件"></el-input>
                  </el-form-item>
                </div>
                <div class="col-md-6">
                  <el-form-item label="出生年月" prop="birthday">
                    <MyDatePicker :editable="isEditable" v-bind:date="editprofile.birthday" @timeChanged="(time)=>this.editprofile.birthday =time">
                    </MyDatePicker>
                    <!-- <el-date-picker :disabled="!isEditable" :default-value="defaultValue" :month="1" v-model="editprofile.birthday" @change="(time)=>this.editprofile.birthday =time" type="month" placeholder="选择日期">
                    </el-date-picker> -->
                  </el-form-item>
                </div>
                <div class="col-md-6">
                  <el-form-item label="政治面貌" :required="true">
                    <el-select :disabled="!isEditable" v-model="editprofile.policy" @change="onPolicyChanged">
                      <el-option v-for="item in this.$store.state.sysconfigs.politicalStatus" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="col-md-6">
                  <el-form-item label="入党(入团)时间" prop="ccptime">
                    <MyDatePicker :editable="isEditable" v-bind:date="editprofile.ccptime" @timeChanged="(time)=>this.editprofile.ccptime =time">
                    </MyDatePicker>
                    <!-- <el-date-picker :disabled="!isEditable" :default-value="defaultValue" :month="1" v-model="editprofile.ccptime" @change="(time)=>this.editprofile.ccptime =time" type="month" placeholder="选择日期">
                    </el-date-picker> -->
                  </el-form-item>
                </div>
                <div class="col-md-6">
                  <el-form-item label="参加工作时间" prop="joinWorkTime">
                    <MyDatePicker :editable="isEditable" v-bind:date="editprofile.joinWorkTime" @timeChanged="(time)=>this.editprofile.joinWorkTime =time">
                    </MyDatePicker>
                    <!-- <el-date-picker :disabled="!isEditable" :default-value="defaultValue" :month="1" v-model="editprofile.joinWorkTime" @change="(time)=>this.editprofile.joinWorkTime =time" type="month" placeholder="选择日期">
                    </el-date-picker> -->
                  </el-form-item>
                </div>
              </el-form>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
  import MyDatePicker from "../../mycomponents/common/MyDatePicker";
  import Depart from "../../mycomponents/common/Depart";
  import National from "../../mycomponents/common/National";
  import Birthplace from "../../mycomponents/common/Birthplace";
  import WorkType from "../../mycomponents/common/WorkType";
  import EmployeeStatus from "../../mycomponents/common/EmployeeStatus";
  import Policy from "../../mycomponents/common/Policy";
  export default {
    name: "UserBaseInfo",
    props: ["profile", "editable"],
    data: function() {
      var ccpTimeValidate = (rule, value, callback) => {
        if (this.editprofile && this.editprofile.policy != 5 && !value) {
          return callback(new Error('请输入入党(入团)时间'))
        } else {
          return callback()
        }
      };
      return {
        sexs: [],
        defaultValue: new Date(),
        imageUrl: "",
        isEditable: true,
        editprofile: {
          empState: 1,
          workType: 1,
          national: 1,
          policy: 1,
          birthplace: {
            province: 110000,
            city: 110100
          },
          name: "",
          birthday: "",
          enterTime: "",
          ccptime: "",
          joinWorkTime: "",
          sex: 1,
          cert: "",
          image: ""
        },
        rules: {
          worktype: [{
            required: true,
            message: "请选择用工性质",
            trigger: "change"
          }],
          empState: [{
            required: true,
            message: "请选择在职状态",
            trigger: "change"
          }],
          name: [{
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          }],
          birthday: [{
            required: true,
            message: "请输入出生日期",
            trigger: "change"
          }],
          joinWorkTime: [{
            required: true,
            message: "请输入参加工作时间",
            trigger: "change"
          }],
          sex: [{
            required: true,
            message: "请选择性别",
            trigger: "change"
          }],
          cert: [{
            required: true,
            message: "请输入参加身份证信息",
            trigger: "blur"
          }],
          policy: [{
            required: true,
            message: "请输入政治面貌",
            trigger: "change"
          }],
          ccptime: [{
            validator: ccpTimeValidate,
            trigger: 'change'
          }],
          national: [{
            required: true,
            message: "请选择民族",
            trigger: "change"
          }],
          birthplace: [{
            required: true,
            message: "请选择籍贯",
            trigger: "change"
          }]
        }
      };
    },
    watch: {
      profile() {
        this.editprofile = this.profile;
      }
    },
    components: {
      Depart,
      National,
      Birthplace,
      WorkType,
      EmployeeStatus,
      Policy,
      MyDatePicker
    },
    methods: {
      onPolicyChanged(val) {
        if (val != 5) {
          this.rules.ccptime[0].required = true
        } else {
          this.rules.ccptime[0].required = false
        }
      },
      getData: function() {
        var validRes = true
        this.$refs.editprofile.validate((valid) => {
          if (valid) {
            validRes = true
          } else {
            console.log('error submit!!');
            validRes = false
            return false;
          }
        });
        console.log(" profile:", JSON.stringify(this.editprofile));
        if (!validRes) {
          return null
        }
        return this.editprofile;
      },
      handleAvatarSuccess(res, file) {
        if (res.result == 1) {
          this.editprofile.image = res.body;
          this.imageUrl = "/hr/person/" + res.body;
        }
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      }
    },
    created: function() {
      if (this.editable != null && this.editable != undefined) {
        this.isEditable = this.editable
      }
      if (this.profile) {
        this.editprofile = this.profile;
        console.log("editprofile:" + JSON.stringify(this.editprofile));
        if (this.editprofile.image) {
          this.imageUrl = "/hr/person/" + this.editprofile.image;
        }
      }
    }
  };
</script>

<style>
  .profile-user-img {
    height: 245px;
    width: 245px;
    margin: 0 auto;
    padding: 3px;
    border: 3px solid #d2d6de;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar-uploader .el-upload__input {
    display: none;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>